<template>
  <div>
    <el-form :inline="true" class="demo-form-inline" ref="filterForm">
      <el-form-item label="学科">
        <el-select
          style="width: 340px"
          size="small"
          @change="updateSubject"
          v-model="filterData.subjectID"
          placeholder="请选择"
        >
          <el-option
            v-for="item in subjectList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级目录">
        <el-select
          style="width: 340px"
          size="small"
          v-model="filterData.catalogID"
          placeholder="请选择"
        >
          <el-option
            v-for="item in listList"
            :key="item.id"
            :label="item.directoryName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标签">
        <el-select
          style="width: 340px"
          size="small"
          v-model="filterData.tags"
          placeholder="请选择"
        >
          <el-option
            v-for="item in tagsList"
            :key="item.id"
            :label="item.tagName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关键字">
        <el-input
          style="width: 340px"
          size="small"
          v-model="filterData.keyword"
          placeholder="审批人"
        ></el-input>
      </el-form-item>
      <el-form-item label="试题类型">
        <el-select
          style="width: 340px"
          size="small"
          v-model="filterData.questionType"
          placeholder="请选择"
        >
          <el-option
            v-for="item in type"
            :key="item.typeValue"
            :label="item.label"
            :value="item.typeValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="难度">
        <el-select
          style="width: 340px"
          size="small"
          v-model="filterData.difficulty"
          placeholder="请选择"
        >
          <el-option label="简单" value="简单"></el-option>
          <el-option label="一般" value="一般"></el-option>
          <el-option label="困难" value="困难"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="方向">
        <el-select
          style="width: 340px"
          size="small"
          v-model="filterData.direction"
          placeholder="请选择"
        >
          <el-option label="o2o" value="o2o"></el-option>
          <el-option label="外包服务" value="外包服务"></el-option>
          <el-option label="企业服务" value="企业服务"></el-option>
          <el-option label="互联网金融" value="互联网金融"></el-option>
          <el-option label="企业咨询" value="企业咨询"></el-option>
          <el-option label="互联网" value="互联网"></el-option>
          <el-option label="电子商务" value="电子商务"></el-option>
          <el-option label="其他" value="其他"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="录入人">
        <el-select
          style="width: 340px"
          size="small"
          v-model="filterData.creatorID"
          placeholder="请选择"
        >
          <el-option
            v-for="item in userList"
            :key="item.id"
            :label="item.username"
            :value="item.username"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="题目备注">
        <el-input
          style="width: 340px"
          size="small"
          v-model="filterData.remarks"
          placeholder="审批人"
        ></el-input>
      </el-form-item>
      <el-form-item label="企业简称">
        <el-input
          style="width: 340px"
          size="small"
          v-model="filterData.shortName"
          placeholder="审批人"
        ></el-input>
      </el-form-item>
      <el-form-item label="城市">
        <el-select
          style="width: 160px"
          size="small"
          @change="citysChange"
          v-model="filterData.province"
          placeholder="请选择"
        >
          <el-option
            v-for="(item, index) in citysList"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
        <el-select
          style="width: 160px"
          size="small"
          v-model="filterData.city"
          placeholder="请选择"
        >
          <el-option
            v-for="(item, index) in areaList"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <el-row type="flex" justify="end" class="clearRow">
      <el-col :span="3"
        ><div>
          <el-button @click="resetForm">清除</el-button>
          <el-button type="primary" @click="filterForm">搜索</el-button>
        </div></el-col
      >
    </el-row>
  </div>
</template>

<script>
import { provinces, citys } from '@/api/hmmm/citys.js'
import { simple } from '@/api/hmmm/subjects.js'
import { list } from '@/api/hmmm/directorys.js'
import { list as taglist } from '@/api/hmmm/tags.js'
import { list as userList } from '@/api/base/users.js'
import { list as questionsList } from '@/api/hmmm/questions.js'
export default {
  props: ['paramsPage', 'paramsPagesize'],
  data () {
    return {
      // 试题类型
      type: [
        {
          typeValue: '单选',
          label: '单选'
        },
        {
          typeValue: '多选',
          label: '多选'
        },
        {
          typeValue: '简答',
          label: '简答'
        }
      ],
      // 学科列表
      subjectList: [],
      // 二级目录列表
      listList: [],
      // 标签列表
      tagsList: [],
      // 城市列表
      citysList: [],
      // 地区列表
      areaList: [],
      // 录入人列表
      userList: [],
      // // 当前页码条目个数
      // paramsPagesize: null,
      // // 当前页码
      // paramsPage: null,

      // 搜索框数据
      filterData: {
        subjectID: null,
        catalogID: null,
        tags: null,
        keyword: null,
        questionType: null,
        difficulty: null,
        direction: null,
        creatorID: null,
        remarks: null,
        province: null,
        city: null,
        page: this.paramsPage,
        pagesize: this.paramsPagesize
      }
    }
  },
  async created () {
    // 获取学科简单列表
    this.getSimple()
    // console.log(provinces())

    // 获取城市列表
    this.citysList = provinces()
    // .map((item, index) => {
    //   return {
    //     name: item,
    //     id: index
    //   }
    // })
    // console.log(this.citysList)

    // 获取用户(录入人)列表
    const userRes = await userList()
    console.log(userRes.data.list)
    this.userList = userRes.data.list
  },
  methods: {
    // 获取学科简单列表
    async getSimple () {
      const simpleRes = await simple()
      // console.log(simpleRes.data)
      this.subjectList = simpleRes.data
    },
    // 学科change事件
    async updateSubject () {
      // 获取二级目录列表
      const listRes = await list({ subjectID: this.filterData.subject })
      // console.log(listRes.data.items)
      this.listList = listRes.data.items
      // 获取标签列表
      const tagsRes = await taglist({ subjectID: this.filterData.subject })
      // console.log(tagsRes.data.items)
      this.tagsList = tagsRes.data.items
    },
    // 城市change事件
    citysChange () {
      // console.log(this.filterData.province)
      // 获取地区列表
      this.areaList = citys(this.filterData.province)
      console.log(this.areaList)
    },
    // 清除表单
    resetForm () {
      // this.$refs.filterForm.resetFields()
      this.filterData = {
        subject: null,
        catalogID: null,
        tags: null,
        keyword: null,
        questionType: null,
        difficulty: null,
        direction: null,
        creatorID: null,
        remarks: null,
        province: null,
        city: null
      }
    },
    // 搜索按钮
    async filterForm () {
      const res = await questionsList(this.filterData)
      console.log(res)
      this.$emit('changeList', res)
    }
  }
}
</script>

<style>
.clearRow {
  margin-bottom: 20px;
}
</style>
